﻿import QtQuick 2.9
import QtQuick.Window 2.2

Window {
    id: window
    visible: true
    width: 480
    height: 480
    title: qsTr("Hello World")

    property point pointA: Qt.point(112, 480)
    property point pointB: pointA
    property int pointAngle: 0
    property point pointC: Qt.point(127+150, 133)
    property point pointD: pointC
    property point pointDA: pointD

    property point pointE: Qt.point(157, 249)
    property point pointF: pointE

    property point pointG: Qt.point(249, 249)
    property point pointH: pointG


    property point point1: Qt.point(281, 220)
    property point point2: point1

    property int pointAngle2: 0

    property point point3: Qt.point(408, 242)

    property point point4: Qt.point(296, 241)
    property point point5: point4

    property point point6: Qt.point(359, 298)
    property point point7: point6
    property point point8: Qt.point(335, 295)

    Component.onCompleted: {
    }

    Canvas{
        id: canvas
        anchors.fill: parent
        onPaint: {
            var ctx = canvas.getContext('2d')

            ctx.clearRect(0,0,canvas.width,canvas.height)

            ctx.strokeStyle = "#000000"
            ctx.lineWidth = 1
            ctx.lineCap = "butt"

            //girl
            ctx.beginPath()
            ctx.strokeStyle = "#000000"
            ctx.lineWidth = 1
            ctx.moveTo(point1.x, point1.y)
            ctx.lineTo(point2.x, point2.y)

            ctx.arc(point2.x+47, point2.y+35, 60, -Math.PI*147/180, -Math.PI*(pointAngle2+147)/180, true)

            if(point3 != Qt.point(408, 242))
                ctx.lineTo(point3.x, point3.y)

            ctx.stroke()

            if(point3 == Qt.point(289, 400)){
                ctx.fillStyle = "#ffccff"
                ctx.fill()
            }
            ctx.closePath()


            ctx.beginPath()
            ctx.strokeStyle = "#000000"
            ctx.lineWidth = 10
            ctx.moveTo(point4.x, point4.y)
            ctx.lineTo(point5.x, point5.y)

            ctx.stroke()
            ctx.closePath()

            //boy
            ctx.strokeStyle = "#000000"
            ctx.lineWidth = 1
            ctx.beginPath()
            ctx.moveTo(pointA.x, pointA.y)
            ctx.lineTo(pointB.x, pointB.y)

            ctx.arc(pointB.x+75, pointB.y, 75, -Math.PI, -Math.PI*pointAngle/180-Math.PI, true)

            if(pointD != pointC)
                ctx.lineTo(pointD.x, pointD.y)

            ctx.stroke()

            if(pointD == Qt.point(292, 480)){
                ctx.fillStyle = "#99ccff"
                ctx.fill()
            }
            ctx.closePath()

            ctx.beginPath()
            ctx.strokeStyle = "#000000"
            ctx.lineWidth = 10
            ctx.moveTo(pointE.x, pointE.y)
            ctx.lineTo(pointF.x, pointF.y)

            ctx.moveTo(pointG.x, pointG.y)
            ctx.lineTo(pointH.x, pointH.y)

            ctx.stroke()
            ctx.closePath()

            ctx.beginPath()
            ctx.strokeStyle = "#000000"
            ctx.lineWidth = 5
            ctx.lineJoin = "round"
            ctx.lineCap = "round"
            ctx.moveTo(point6.x, point6.y)
            ctx.lineTo(point7.x, point7.y)

            ctx.moveTo(335, 295)
            ctx.lineTo(point8.x, point8.y)

            ctx.stroke()
            ctx.closePath()


        }
    }

    MouseArea{
        anchors.fill: parent
        enabled: false
        onClicked: {
            if(anim.running) return
            init()
            anim.start()
        }
    }

    Text {
        id: name
        anchors.horizontalCenter: parent.horizontalCenter
        y: 50
        text: qsTr("萌梦")
        font.pointSize: 30
    }

    SequentialAnimation{
        id: anim
        running: true
        PropertyAnimation{target: window; property: "pointB"; to: Qt.point(127, 133); duration: 1000; }
        PropertyAnimation{target: window; property: "pointAngle"; to: 180; duration: 1000; }
        PropertyAnimation{target: window; property: "pointD"; to: Qt.point(292, 480);duration: 1000; easing.type: Easing.OutCubic}

        PropertyAnimation{target: window; property: "pointF"; to: Qt.point(157, 294);duration: 500; }
        PropertyAnimation{target: window; property: "pointH"; to: Qt.point(249, 294);duration: 500; }

        PauseAnimation {duration: 200}

        PropertyAnimation{target: window; property: "point2"; to: Qt.point(343, 155); duration: 700; }
        PropertyAnimation{target: window; property: "pointAngle2"; to: 170; duration: 1000; }
        PropertyAnimation{target: window; property: "point3"; to: Qt.point(289, 400); duration: 1000; easing.type: Easing.OutCubic }

        PropertyAnimation{target: window; property: "point5"; to: Qt.point(270, 268);duration: 500; }

        PropertyAnimation{target: window; property: "point7"; to: Qt.point(335, 295);duration: 500; }
        PropertyAnimation{target: window; property: "point8"; to: Qt.point(342, 315);duration: 500; }

        PauseAnimation {duration: 1000}

        onStopped: {
            init()
            anim.restart()
        }
    }

    Timer{
        id: timer
        running: true
        interval: 50
        repeat: true
        onTriggered: {
            canvas.requestPaint()
        }
    }

    function init(){
        pointA = Qt.point(112, 480)
        pointB = pointA
        pointAngle = 0
        pointC = Qt.point(127+150, 133)
        pointD = pointC
        pointDA = pointD

        pointE = Qt.point(157, 249)
        pointF = pointE

        pointG = Qt.point(249, 249)
        pointH = pointG

        point1 = Qt.point(281, 220)
        point2 = point1

        pointAngle2 = 0

        point3 = Qt.point(408, 242)

        point4 = Qt.point(296, 241)
        point5 = point4

        point6 = Qt.point(359, 298)
        point7 = point6
        point8 = Qt.point(335, 295)
    }
}
